<template>
    <div class="addProd">
        <div class="box flex-b">
            <div class="left">
                <div class="prod-title flex-a flex-b">
                    <div class="flex-a">
                        <div class="basic">{{ id ? '编辑' : '新增' }}服务</div>
                        <el-button type="warning" style="padding:12px 50px" class="btn-plain"
                            @click="back">返回上一页</el-button>
                    </div>
                    <div>
                        <el-button type="warning" style="padding:12px 70px" class="btn" @click="submit">提交</el-button>
                    </div>
                </div>
                <div class="prod-content">
                    <el-form ref="form" :model="form" label-width="120px" class="input">
                        <el-form-item label="名称：">
                            <el-input v-model="form.name" placeholder="请输入服务名称" clearable></el-input>
                        </el-form-item>
                        <!-- 图标库 -->
                        <!-- <icons :title="iconTitle" @check="check" @upload="upload"></icons> -->
                        <el-form-item label="服务分类：">
                            <el-select v-model="form.type" @change="changeServe" placeholder="请选择服务分类" class="input"
                                clearable>
                                <el-option v-for="item in serveList" :key="item.id" :label="item.name"
                                    :value="item.id + ''"></el-option>
                            </el-select>
                            <el-select v-model="form.secType" placeholder="请选择服务子分类" class="input" clearable>
                                <el-option v-for="item in subServeList" :key="item.id" :label="item.name"
                                    :value="item.id + ''"></el-option>
                            </el-select>
                            <!-- <div class="tip">(没找到分类？请 <span @click="addSubClass">新增子分类</span>)</div> -->
                        </el-form-item>
                        <!-- <el-form-item label="备注：">
                            <el-input type="textarea" :rows="4" placeholder="请输入备注" v-model="form.desc"
                                clearable></el-input>
                        </el-form-item> -->
                        <el-form-item label="服务项目/规格：">
                            <el-button type="warning" style="padding:12px 40px" class="btn" @click="addData">添加</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="table">
                        <el-table v-loading="loading" :data="serProData" :header-cell-class-name="tableHeaderStyle">
                            <el-table-column label="条形码" align="center" prop="serverNo">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入条形码" class="input" v-model="scope.row.spcNo"
                                        clearable></el-input>
                                    <!-- <div>点击生成</div> -->
                                </template>
                            </el-table-column>
                            <el-table-column label="服务项目/规格名称" :render-header="renderHeader" align="center" prop="spcNo">
                                <template slot-scope="scope">
                                    <el-input type="textarea" :rows="4" placeholder="请输入服务项目名称" v-model="scope.row.spcName"
                                        clearable></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="拼音码" align="center" prop="spcName">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入拼音码" class="input" v-model="scope.row.spcSp"
                                        clearable></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="零售价（元）" align="center" prop="spcSp">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.retPrice" class="input input-radius" placeholder="零售价"
                                        clearable>
                                        <template slot="prepend">￥</template>
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="会员价（元）" align="center" prop="memPrice">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.memPrice" class="input input-radius" placeholder="会员价"
                                        clearable>
                                        <template slot="prepend">￥</template>
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="服务时长" :render-header="renderHeader" align="center" prop="isDisMem">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.serverTime" class="input" clearable>
                                        <el-option label="15分钟" value="15"></el-option>
                                        <el-option label="20分钟" value="20"></el-option>
                                        <el-option label="30分钟" value="30"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="附含商品" align="center" :render-header="renderHeader" prop="isPrchRem">
                                <template>
                                    <el-button type="warning" style="margin-bottom:10px;padding: 9px 20px;"
                                        class="btn">选择商品</el-button>
                                    <el-button class="btn-plain" style="padding:9px 20px;">查看已选</el-button>
                                </template>
                            </el-table-column> -->
                            <el-table-column label="其他状态" align="center" prop="isAddRec">
                                <template slot-scope="scope">
                                    <div class="switch"><span>复购提醒</span><el-switch v-model="scope.row.isPrchRem"
                                            active-color="#FFDD03" inactive-color="#D9D9D9"></el-switch></div>
                                    <div class="switch"><span>参与会员折扣<el-tooltip class="item" effect="dark"
                                                content="关闭后不可使用会员折扣优惠" placement="top">
                                                <i class="el-icon-question"></i>
                                            </el-tooltip></span><el-switch v-model="scope.row.isDisMem"
                                            active-color="#FFDD03" inactive-color="#D9D9D9"></el-switch></div>
                                    <div class="switch"><span>生成服务记录<el-tooltip class="item" effect="dark"
                                                content="开启后，收银台消费该服务，若选有对应宠物，则宠物档案自动生成一条服务记录，撤单记录删除。" placement="top">
                                                <i class="el-icon-question"></i>
                                            </el-tooltip></span><el-switch v-model="scope.row.isAddRec"
                                            active-color="#FFDD03" inactive-color="#D9D9D9"></el-switch></div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                <template slot-scope="scope">
                                    <!-- <el-button size="mini" type="text" icon="el-icon-edit"
                                        @click="handleUpdate(scope.row)" v-hasPermi="['pet:spc:edit']">修改</el-button> -->
                                    <el-button size="mini" type="text" icon="el-icon-delete"
                                        @click="handleDelete(scope.row, $index)"
                                        v-hasPermi="['pet:spc:remove']">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加或修改分类管理对话框 -->
        <el-dialog title="新增子分类" :visible.sync="open" width="520px" append-to-body class="center">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="input">
                <div>
                    <el-form-item label="子分类名" prop="name">
                        <el-input v-model="form.name" placeholder="请输入子分类名称（建议 5 字以内）" />
                    </el-form-item>
                    <el-form-item label="所属分类" prop="name">
                        <el-select v-model="form.classN" placeholder="请选择所属分类" style="width:100%">
                            <el-option v-for="item in subServeList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 图标库 -->
                    <!-- <icons :title="iconHead"></icons> -->
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="btn" style="padding:12px 70px" type="primary" @click="submitForm">提 交</el-button>
            </div>
        </el-dialog>
        <div class="submit-foot">
            <el-button class="btn" style="padding:12px 70px" type="primary" @click="submit">提 交</el-button>
        </div>
    </div>
</template>

<script>
import { getInfo, addInfo, updateInfo, getServeList } from "@/api/pet/info";
import icons from "@/components/icons/index"
export default {
    name: "addProd",
    components: {
        icons
    },
    data() {
        return {
            iconTitle: '图标',
            iconHead: '分类图标',
            open: false,
            serveList: [],//服务-子服务分类下拉
            subServeList: [],//子服务分类下拉
            form: {},
            sortDialogVisible: false,//新增分类弹窗
            srotDialogTitle: '',
            sortForm: {},
            rules: {
                name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ],
            },
            serProData: [{}],
            loading: false,
            id: ''
        };
    },
    created() {
        this.getServeList()//获取服务-子服务分类
        if (this.$route.query.id) {
            this.id = this.$route.query.id
        }
    },
    mounted() {

    },
    methods: {
        //获取详情
        getSerDetail(id) {
            getInfo(id).then(response => {
                this.form = response.data;
                this.serveList.forEach(item => {
                    if (item.id == response.data.type) {
                        this.subServeList = item.list
                    }
                })
                this.serProData = response.data.list
            });
        },
        //添加一条数据
        addData() {
            this.serProData.push({ sw1: true })
        },
        // 返回上一页
        back() {
            this.$router.push({ path: '/goods/info' })
        },
        //获取服务-子服务分类
        getServeList() {
            getServeList().then(res => {
                if (res.code == 200) {
                    this.serveList = res.data
                    if(this.id){
                        this.getSerDetail(this.id)
                    }
                }
            })
        },
        //选择服务分类-筛选子分类
        changeServe(val) {
            this.subServeList = []
            this.$set(this.form, 'secType', '')
            this.serveList.forEach(item => {
                if (item.id == val) {
                    this.subServeList = item.list
                }
            })
        },
        //表单提交
        onSubmit() {

        },
        //表头样式
        tableHeaderStyle({ row, rowIndex }) {
            if (rowIndex === 0) {
                return 'grey-back';
            }
            return '';
        },
        //新增子分类
        addSubClass() {
            this.open = true
        },
        //新增分类
        addSort() {
            this.srotDialogTitle = '新增分类'
            this.sortDialogVisible = true
        },
        //新增品牌
        addBrand() {
            this.srotDialogTitle = '新增品牌'
            this.sortDialogVisible = true
        },
        //新增供应商
        addSupplier() {
            this.srotDialogTitle = '新增供应商'
            this.sortDialogVisible = true
        },
        //删除
        handleDelete(row, index) {

        },
        // 选择图标
        check(url) {
            this.form.icon = url
        },
        //上传图标
        upload(url) {
            this.form.icon = url
        },
        //提交数据
        submit() {
            this.form.list = this.serProData
            if (this.id) {
                updateInfo(this.form).then(response => {
                    this.$modal.msgSuccess("编辑成功");
                });
                this.back()
            } else {
                addInfo(this.form).then(response => {
                    this.$modal.msgSuccess("添加成功");
                });
                this.back()
            }
        },
        //提交表单
        submitForm() {

        },
        //自定义表头
        renderHeader(h, { column, $index }) {
            return $index == 1 ?
                h('div', [
                    h('p', '*'),
                    h('span', column.label),
                ])
                : h('div', [
                    h('span', column.label),
                    h(
                        'el-tooltip',
                        {
                            props: {
                                effect: 'dark',
                                content: $index == 5 ? `进行该服务所需的时长，用于推算预约时间段` : $index == 6 ? '服务结账时商品将作为赠品结账，将同步库存数据' : '',
                                placement: 'top',
                            },
                        },
                        [
                            h('i', {
                                class: 'el-icon-question',
                                style: 'font-size:16px;margin-left:5px;',
                            }),
                        ]
                    ),
                ])
        },
    }
};
</script>
<style scoped lang="scss">
.box {
    position: relative;

    .left {
        width: 100%;
    }

    .prod-title {
        .basic {
            font-size: 18px;
            color: #333336;
            font-weight: 700;
            margin-right: 30px;

            span {
                color: #409eff;
                font-size: 12px;
                font-weight: normal;
                margin: 0 20px 0 5px;
            }
        }
    }

    .prod-content {
        margin-top: 20px;

        div {
            margin-bottom: 15px;

            .mr {
                margin-right: 10px;
            }

            p {
                color: #000000;
                font-size: 14px;

                span {
                    color: #b3b3b3;
                    font-size: 12px;
                }
            }

            .el-input {
                width: 240px;
            }

            .select {
                margin-left: 10px;
                width: 80px;
            }

            .el-textarea {
                width: 500px;
            }

            .el-button.btn {
                margin-left: 10px;
            }

            .tip {
                display: inline-block;
                font-size: 12px;
                color: #333336;
                margin-left: 5px;

                span {
                    color: #409eff;
                }

                span:hover {
                    cursor: pointer;
                }
            }

        }

        .flex {
            p {
                margin-top: 0 !important;
            }
        }

        .suggest {
            span {
                color: rgb(245, 108, 108);
                font-size: 12px;
            }
        }

        .table {
            margin-left: 130px;

            .el-input {
                width: 120px !important;
            }

            .el-textarea {
                width: 150px !important;
            }

            div {
                color: #409eff;
            }

            .switch {
                div {
                    margin: 0;
                }

                span {
                    display: inline-block;
                    font-size: 14px;
                    color: #606266;
                    width: 110px;
                    text-align: left;
                    box-sizing: border-box;
                }
            }
        }
    }
}

.submit-foot {
    position: fixed;
    bottom: 20px;
    background-color: #fff;
    width: 100%;
    height: 60px;
    z-index: 77;
    padding-left: 20px;
    margin-left: -18px;
    border-top: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 6px 0 6px rgba(0, 0, 0, .12);
    line-height: 60px;
    margin-bottom: -20px;

}
</style>
